<template>
  <div>
    <!--资产列表-->
    <div class="asset-list">
      <row type="flex" justify="space-around" class="code-row-bg">
        <i-col span="24">
          <div class="dashboard-container">
            <div class="container">
              <div
                  class="tableBar"
                  style="display: inline-block"
              >
                <el-input v-model="input" placeholder="输入搜索" />
                <el-button type="primary" :icon="Search" @click="ToSearch()">搜索</el-button>
              </div>
            </div>
            <asset-list :list="list" :title="listTitle">
            </asset-list>
            <div class="demo-pagination-block">
              <el-pagination
                  v-model:current-page="current"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  :page-count="pageNum"
                  prev-text="上一页"
                  next-text="下一页"
                  layout="total, prev, pager, next"
                  :total="counts"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </i-col>
      </row>
    </div>

  </div>
</template>
<style scoped>
.container {
  display: flex;
  justify-content:center;
}
.tableBar {
  width: 1024px;
  display: flex ! important;
  justify-content: space-between;
  padding: 10px 0;
}
.container .tableBar > *{
  margin: 0 20px;
}
.asset-list {
  position: relative;
  text-align: center;
}
.el-pagination {
  padding: 10px;
  justify-content: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
<script setup>
import axios from "axios";
import AssetList from "@/components/AssetList.vue";
import {Search} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import {ref} from "vue";
const consoleRef = ref(console);
const list = ref([]);
const pageNum = ref(0);
const current = ref(1);
const counts = ref(0);
const input = ref('');
const listTitle= ref('搜索结果');
const asset = ref({
  id: 0,
  assetNo: '',
  assetTypeNo: '',
  assetName: '',
  assetLabel: '',
  assetDesc: '',
  assetCategory: '',
  assetStatus: '',
  registerTime: '',
  lastUpdatedTime: '',
  belongOrg: 0,
  belongOrgName: '',
  assetUser: '',
  ip: '',
});

const ToSearch = (async() => {
    try {
      const res = await axios.get('http://localhost:8080/asset/queryByCategory/' + input.value + '/' + current.value);
      consoleRef.value.log(res);
      if (res.data.code === 1) {
        if (res.data.data.total === 0){
          ElMessage.warning("无结果")
        }
        else{
          list.value = res.data.data.records
          consoleRef.value.log(list.value)
          pageNum.value = res.data.data.pages
          current.value = res.data.data.current
          counts.value = res.data.data.total
        }

      } else {
        ElMessage.error(res.data.msg || '操作失败')// 处理响应数据
      }
    }catch (error) {
      ElMessage.error('请求出错了：' + error)
    }
  });
const handleCurrentChange = async (val) => {
  try {
    const response = await axios.get('http://localhost:8080/asset/queryByCategory/' + input.value + '/' + val);

    if (String(response.code) === '1') {
      list.value = response.data.records;
      pageNum.value = response.data.pages;
      current.value = response.data.current;
      counts.value = response.data.total;
    } else {
      ElMessage.error(response.msg || '操作失败');
    }
  } catch (error) {
    ElMessage.error('请求出错了：' + error);
  }
};
</script>